<style>
    #layui-upload-box li,#layui-upload-image-box li{
        width: 120px;
        height: 100px;
        float: left;
        position: relative;
        overflow: hidden;
        margin-right: 10px;
        border:1px solid #ddd;
    }
    #layui-upload-box li img,#layui-upload-image-box li img{
        width: 120px;
        height: 100px;
    }
    #layui-upload-box li p,#layui-upload-image-box li p{
        width: 100%;
        height: 22px;
        font-size: 12px;
        position: absolute;
        left: 0;
        bottom: 0;
        line-height: 22px;
        text-align: center;
        color: #fff;
        background: rgba(0,0,0,.6);
    }
    #layui-upload-box li i,#layui-upload-image-box li i{
        display: block;
        width: 20px;
        height:20px;
        position: absolute;
        text-align: center;
        top: 2px;
        right:2px;
        z-index:999;
        cursor: pointer;
    }

    .close-img{
        position: absolute;
        z-index: 100;
        top: 0;
        right: 5px;
        font-size: 20px;
        color:#fff;
    }
    #allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    .region-sel{display:none;}
    .area-sel{display:none;}
    .town-sel{display:none;}
    .metro-sel{display:none;}
</style>
<script>
    layui.use(['upload','element','laydate','layer','form'],function () {
        var element = layui.element;
        var laydate = layui.laydate;
        var layer = layui.layer;
        var form = layui.form;
        //执行一个laydate实例
        laydate.render({
            elem: '#opentime' //指定元素
        });
        laydate.render({
            elem: '#handtime' //指定元素
        });

        $("#getmap").click(function () {
            var sel = $("#city option:selected").val().split(',');
            var city = sel[1]
            if (!city.length) {
                layer.msg('请选择区域',{icon: 7});
            }else{
                // var uri = $("#uri").val();
                var url = '/admin/property/position/'+city
                layer.open({
                    type: 2,
                    title:'地图标记',
                    content: [url, 'no'],
                    area : ['100%','100%'],
                    shade : 0.2,
                    resize:true,
                    iframeAuto:true
                });
            }
        })

        var upload = layui.upload

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#uploadPic'
            ,url: '{{ route("uploadImg") }}'
            ,multiple: false
            ,data:{"_token":"{{ csrf_token() }}"}
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                /*obj.preview(function(index, file, result){
                 $('#layui-upload-box').append('<li><img src="'+result+'" /><p>待上传</p></li>')
                 });*/
                obj.preview(function(index, file, result){
                    $('#layui-upload-box').html('<li><img src="'+result+'" /><p>上传中</p></li>')
                });

            }
            ,done: function(res){
                //如果上传失败
                if(res.code == 0){
                    $("#thumb").val(res.url);
                    $('#layui-upload-box li p').text('上传成功');
                    return layer.msg(res.msg);
                }
                return layer.msg(res.msg);
            }
        });
        //多图片上传
        var count = $("input#imgnum").val()
        var ind = Number(count);
        var uploadImages = upload.render({
            elem: '#uploadImages'
            ,url: '{{ route("uploadImg") }}'
            ,multiple: true
            ,number: 10
            ,data:{"_token":"{{ csrf_token() }}"}
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                /*obj.preview(function(index, file, result){
                 $('#layui-upload-box').append('<li><img src="'+result+'" /><p>待上传</p></li>')
                 });*/
                obj.preview(function(index, file, result){
                    var html = '<li><img src="'+result+'" /><p>上传中</p></li>'
//                    $('#layui-upload-image-box').html('<li><img src="'+result+'" /><p>上传中</p></li>')
                    $('#layui-upload-image-box').append(html)
                });

            }
            ,done: function(res){
                //如果上传成功

                if(res.code == 0){
                    var html = '<input type="hidden" name="images['+ind+'][bigimg]" value="'+ res.url +'" /><input type="hidden" name="images['+ind+'][smallimg]" value="'+ res.small +'" /><span class="layui-icon layui-icon-close-fill close-img" onclick="delImage(this)"></span>'
                    $("#layui-upload-image-box li:last-child").append(html);
                        ind +=1;
                    $('#layui-upload-image-box li p').text('上传成功');

                    return layer.msg(res.msg);
                }
                return layer.msg(res.msg);
            }
        });
        form.on('select(myselect)', function(data){
            var areaId=(data.value);
            getAreaData(areaId,'#region','.region-sel')
        });
        form.on('select(myselect2)', function(data){
            var areaId=(data.value);
            getAreaData(areaId,'#area','.area-sel')
            var cid = data.value.split(',')
            getMetroData(cid[0],'#metro','.metro-sel')
            getMetroStation(0,'#station')
        });
        form.on('select(myselect3)', function(data){
            var areaId=(data.value);
            getAreaData(areaId,'#town','.town-sel')
        });
        form.on('select(metroselect)', function(data){
            var metroId=(data.value);
            getMetroStation(metroId,'#station')
        });
        $(function () {
            var province_id = Number($("#province_id").val())
            var region_id = Number($("#region_id").val())
            var area_id = Number($("#area_id").val())
            var town_id = Number($("#town_id").val())
            var metro_id = Number($("#metro_id").val())
            var metro_station_id = $("#metro_station_id").val()
            if(province_id > 0){
                getAreaData(province_id,'#region','.region-sel',region_id)
            }
            if(area_id > 0){
                getAreaData(area_id,'#town','.town-sel',town_id)
            }
            if(region_id > 0){
                getAreaData(region_id,'#area','.area-sel',area_id)
                getMetroData(region_id,'#metro','.metro-sel',metro_id)
            }
            if(metro_id > 0){
                getMetroStation(metro_id,'#station',metro_station_id)
            }

        })

        function getAreaData(areaId,idattr,classattr,region_id) {
            $.ajax({
                type: 'POST',
                url: '{{ route('admin.region.getCity') }}',
                data: {province_id:areaId},
                dataType:  'json',
                success: function(data){
                    $(idattr).html("<option value='0'></option>");
                    if (data.status == 'T'){
                        $.each(data.data, function(key, val) {
                            if(region_id == val.id){
                                var option1 = $("<option selected>").val(val.id+','+val.name).text(val.name);
                            } else {
                                var option1 = $("<option>").val(val.id+','+val.name).text(val.name);
                            }
                            $(idattr).append(option1);
                        });
                        form.render('select');
                        $(classattr).css({'display':'inline'})
                    }else{
                        form.render('select');
                    }

                }
            });
        }
        function getMetroData(city_id,idattr,classattr,metro_id=0) {
            $.ajax({
                type: 'POST',
                url: '{{ route('admin.metro.getMetroByCity') }}',
                data: {city_id:city_id},
                dataType:  'json',
                success: function(data){
                    $(idattr).html("<option value='0'></option>");
                    if (data.code == 0){
                        $.each(data.metro, function(key, val) {
                            if(metro_id == val.id){
                                var option1 = $("<option selected>").val(val.id).text(val.name);
                            }else{
                                var option1 = $("<option>").val(val.id).text(val.name);
                            }
                            $(idattr).append(option1);
                        });
                        form.render('select');
                        $(classattr).css({'display':'block'})
                    }else{
                        form.render('select');
                        $(classattr).css({'display':'none'})
                    }

                }
            });
        }
        function getMetroStation(metro_id,idattr,metro_station_id=0) {
            $.ajax({
                type: 'POST',
                url: '{{ route('admin.metro_station.getStation') }}',
                data: {metro_id:metro_id},
                dataType:  'json',
                success: function(data){
                    $(idattr).html("<option value='0'></option>");
                    if (data.code == 0){
                        $.each(data.station, function(key, val) {
                            if (metro_station_id == val.id) {
                                var option1 = $("<option selected>").val(val.id).text(val.name);
                            }else{
                                var option1 = $("<option>").val(val.id).text(val.name);
                            }
                            $(idattr).append(option1);
                        });
                        form.render('select');
                    }else{
                        form.render('select');
                    }
                }
            });
        }
    })
    function delImage(obj) {
        $(obj).parent().remove()
    }

    $("#selCommunity").click(function () {
        var url = '/admin/community/selCommunity'
        layer.open({
            type: 2,
            title:'选择小区',
            content: url,
            area : ['50%','80%'],
            shade : 0.2
        });
    })
</script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
    var ue = UE.getEditor('container');
    ue.ready(function() {
        ue.execCommand('serverparam', '_token', '{{ csrf_token() }}');//此处为支持laravel5 csrf ,根据实际情况修改,目的就是设置 _token 值.
    });
</script>